<template>
	<div class="service">
		<h2>提交问题工单</h2>
		<div>
			<ul>
				<li><label for="">标题：</label><input type="text" placeholder="标题" v-model="title"></li>
				<li><label for="">内容：</label><textarea name="" id="" cols="30" rows="2" v-model="content"></textarea></li>
				<li><label for="">上传截图 :</label><span class="tips">最大文件长度：2MB</span></li>
				<li><label for=""></label>
					          <span>
                      <img  class="updateImg"  :src="base64img" alt="">
                    </span>
				</li>
				<li>
					<label></label>
					<span class="upPic">上传图
						<input type="file" @change='updateFile($event)' accept="image/gif, image/jpeg, image/jpg, image/png">
					</span>

				</li>
				<li>
					<!-- <avatar @updata='updataImg' v-model="avatar"></avatar> -->
				</li>
				<li>
					<input type="button" value="提交" class="sendMsg" @click="sendOrder">
				</li>
			</ul>
		</div>

	</div>
</template>
<script>
import Avatar from "../../children/avatar/avatar";
import { addGongdan, updata } from "../../../../config/getData";

export default {
  created() {},
  components: {
    Avatar
  },
  methods: {
    updateFile(e) {
      let files = e.target.files,
      file = files[0];
      if (files.length == 0) return false;
      this.file = file;

    // console.error(file)
    // return;
    let reader = new FileReader();
    let results=reader.readAsDataURL(file);
    var that = this;
    reader.onloadend = function () {

       that.base64img = reader.result;
      // 下面逻辑处理
        console.error(this.base64img);
      };


    },
    sendOrder() {
      if (this.title == "" && this.content == "") {
		this.$vux.toast.show({
			text: '不能为空请输入标题或者内容',
			width:'auto',
		})
        return;
      }
	  let param = new FormData(); // 创建form对象

      param.append("image", this.file); // 通过append向form对象添加数据
	    param.append("title", this.title);
      param.append("content", this.content);


      addGongdan(param).then(res => {
		this.$vux.toast.show({
			text: res.msg,
			type:'success',
		})

        this.title = "";
		this.content = "";
		this.$router.go(-1);
      });
    }
  },
  data() {
    return {
      codeImg: "../../../../assets/images/erweima.png",
      tel: "13838816123",
      avatar: false,
	    title: "",
	    base64img:"",
      content: "",
      formData: null,
      file: "",
      updateImgData: [],
      list: [],

    };
  }
};
</script>
<style lang="scss" scoped>
@import "../../../../assets/css/all.scss";
input,
textarea {
  border: none;
  -webkit-appearance: none;
  background: none;
}

.tips {
  color: $red;
}

.service {
  @include screen;
  min-height: 100%;
  overflow-y: auto;
  background: #ffffff;
  .updateImg {
    width: 90px;
    height: 90px;
  }
  .upPic {
    background: #3296fa;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    color: #ffffff;
    position: relative;
    input {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
  }
  h2 {
    color: #555;
    font-weight: 200;
    padding: 5px 0px 5px 15px;
    font-size: 18px;
    border-bottom: 1px solid #cccccc;
    margin-top: 10px;
  }
  ul {
    li {
      margin-top: 15px;
      label {
        display: inline-block;
        width: 70px;
        line-height: 30px;
        text-align: right;
        padding-right: 15px;
      }
      input[type="text"] {
        background: #ffffff;
        line-height: 35px;
        text-indent: 18px;
        border: 1px solid #cccccc;
      }
      textarea {
        vertical-align: middle;
        background: #ffffff;
        text-indent: 18px;
        padding: 5px 0;
        border: 1px solid #cccccc;
      }
      .sendMsg {
        background: #3296fa;
        color: #ffffff;
        width: 160px;
        display: block;
        margin-left: 88px;
        line-height: 35px;
        border-radius: 4px;
      }
    }
  }
  .myOrders {
    .moreOrders {
      text-align: center;
      padding: 15px 0;
      background: #ffffff;
      color: #3296fa;
      text-decoration: underline;
    }
  }
  .contact {
    text-align: center;
    padding-top: 20px;
  }
}
</style>
